<template>
  <transition name="slide">
    <van-tabbar v-model="active" v-show="show" @change="onChange" route>
      <van-tabbar-item icon="notes-o">目录</van-tabbar-item>
      <van-tabbar-item icon="comment-o" :to="`/comments/${comicId}`">评论</van-tabbar-item>
      <van-tabbar-item icon="bulb-o">催更</van-tabbar-item>
      <van-tabbar-item icon="star-o">收藏</van-tabbar-item>
      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </transition>
  <!-- 漫画章节菜单 -->
  <van-popup v-model:show="showPopUp" class="popup" position="bottom" :overlay="false">
    <div class="container">
      <div class="title">
        <div class="status">{{ releaseStatus }} {{ updateStatus }}</div>
        <div class="sort" @click="toggleSortOrder">
          <div class="icon">
            <van-icon name="arrow-up" class="up" :color="sortOrder === 'desc' ? '#ff0000' : '#a0a0a0'" /> <!-- 倒序  -->
            <van-icon name="arrow-down" class="down" :color="sortOrder === 'asc' ? '#ff0000' : '#a0a0a0'" />
            <!-- 正序 -->
          </div>
          <div class="text">
            <template v-if="sortOrder === 'asc'">
              <span> 章节正序 </span>
            </template>
            <template v-else>
              <span> 章节倒序 </span>
            </template>
          </div>
        </div>
      </div>
      <div class="scroll-content">
        <van-grid class="grid" :gutter="5">
          <van-grid-item v-for="(chapter, index) in sortedChapterInfoList" :key="chapter.id" :text="chapter.name"
            :id="`index-${index}`" @click="onClickChapter(chapter.id)" />
        </van-grid>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { getComicDetail } from "@/api/index.js";
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const comicId = computed(() => route.params.id);
const active = ref(-1);
const props = defineProps(["show", "chapterInfoList"]);

const show = computed(() => props.show);
const chapterInfoList = computed(() => props.chapterInfoList); // [{id:1,chapter:1,name:'第一话'}]

const sortOrder = ref("asc"); // 默认升序

const sortedChapterInfoList = computed(() => {
  return [...chapterInfoList.value].sort((a, b) => {
    if (sortOrder.value === "asc") {
      return a.id - b.id; // 升序
    } else if (sortOrder.value === "desc") {
      return b.id - a.id; // 降序
    }
  });
});

const toggleSortOrder = () => {
  sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
};

const showPopUp = ref(false);
const emit = defineEmits(["change-show", 'change-chapter-id']);

const chapterNumber = ref(0); // 总章节数
const firstChapterId = ref(0); // 第一章节id
const lastNumChapter = ref(""); // 第XX话
const ifend = ref(0); // 是否完结 1 完结 0 连载中

const releaseStatus = computed(() => (ifend.value === 0 ? "连载中" : "完结"));
const updateStatus = computed(() =>
  ifend.value === 0
    ? "更新至第" + lastNumChapter.value + "话"
    : "共第" + lastNumChapter.value + "话"
);

onMounted(async () => {
  const res = await getComicDetail(comicId.value);
  // console.log("getComicDetail", res);

  ifend.value = res.data.ifend;
  chapterNumber.value = res.data.lastNumChapter;
  firstChapterId.value = res.data.firstchapterid;
  lastNumChapter.value = res.data.lastNumChapter;
});

const onChange = (active) => {
  if (active === 0) {
    // 点击目录，改变父组件show的值为false
    emit("change-show", false);
    // 显示漫画章节菜单
    showPopUp.value = true;
  }
};

const onClickChapter = (chapterId) => {
  showPopUp.value = false;
  active.value = -1;
  // 点击章节，更新当前漫画起始章节页面
  emit("change-chapter-id", chapterId);

};
</script>

<style scoped>
/* 定义滑动动画 */
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from {
  transform: translateY(100%);
  /* 从底部滑入 */
}

.slide-enter-to {
  transform: translateY(0);
  /* 滑动到最终位置 */
}

.slide-leave-from {
  transform: translateY(0);
  /* 从当前位置开始 */
}

.slide-leave-to {
  transform: translateY(100%);
  /* 滑动到底部 */
}

.popup {
  width: 100%;
  height: calc(100vh / 3);
  background-color: rgba(0, 0, 0, 0.85);
  color: #a0a0a0;
}

.container {
  position: relative;
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  color: #a0a0a0;
  background-color: rgba(0, 0, 0, 0.85);
}

.title {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 1;
}

.status {
  font-size: 14px;
}

.scroll-content {
  height: calc(100% - 40px);
  overflow-y: auto;
  scrollbar-width: none;
  overflow-y: overlay;
  -webkit-overflow-scrolling: touch;
  background-color: rgba(0, 0, 0, 0.85);
}

.scroll-content::-webkit-scrollbar {
  display: none;
}

.sort {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
}

.icon {
  display: grid;
  place-items: center;
  height: 40px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.up,
.down {
  height: 40px;
  line-height: 40px;
}

.text {
  margin-left: 10px;
}

.grid {
  background-color: rgba(0, 0, 0, 0.85);
}

:deep(.van-grid-item__text) {
  color: #a0a0a0;
}

:deep(.van-grid-item__content) {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.85);
}
</style>
